<!--  -->
<template>
  <!--  <div class="">综合信息设置</div>-->

  <div id="app">
    <div
      id="chartLine"
      v-loading="listLoading"
      :style="{width: '1000px', height: '500px',background:'#ffffff'}"
      :data="query"
      :settings="vchartsConfig.setting"
    />
  </div>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// // eslint-disable-next-line no-unused-vars
// var that = this
import { toAdminAssignRole } from '@/api/salary'
import * as echarts from 'echarts'
import axios from 'axios'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    echarts
  },
  // props实现父子组件传递数据
  props: {},
  data() {
    // 这里存放数据
    return {
      vchartsConfig: {
        setting: {
          // 别名
          labelMap: {
            name: ['名称'],
            basicSalary: ['基本工资'],
            bonus: ['奖金'],
            lunchSalary: ['午餐补助']
          }
        }
      },
      listLoading: true,
      // 定义图表，各种参数
      msg: '柱状图',
      datay: [500, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000],
      query: {
        columns: ['name', 'basicSalary', 'bonus', 'lunchSalary'],
        rows: [],
        list: [],
        list1: [],
        list2: []
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    // option:{
    //   handler(newValue,oldValue){
    //     if(this.query){
    //       if(newValue){
    //         this.query.setOption(newValue)
    //       }else{
    //         this.query.setOption(oldValue)
    //       }
    //     }else{
    //       this.showECharts()
    //     }
    //   }
    // }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getAdminList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      // this.showECharts()
    })
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  },
  // 方法集合
  methods: {
    getAdminList() {
      // true时，表格中就会出现正在加载图标 axios.get('/all/list')
      this.listLoading = true
      // 调用src/api/user.js中的pageUserList()
      toAdminAssignRole().then((res) => {
        this.listLoading = false
        for (let i = 0; i < res.data.length; i++) {
          const da = {}
          da.name = res.data[i].name
          da.basicSalary = res.data[i].basicSalary
          da.bonus = res.data[i].bonus
          da.lunchSalary = res.data[i].lunchSalary
          this.query.rows.push(da.name) // 名称
          this.query.list.push(da.basicSalary) // 基本工资
          this.query.list1.push(da.bonus) // 奖金
          this.query.list2.push(da.lunchSalary) // 早餐补助
          // console.log(da.name)
        }
        // console.log(res.data)
        // for (let i = 0; i < this.query.rows.length; i++) {
        //   console.log(this.query.rows[i])
        // }
        // for (let i = 0; i < this.query.list.length; i++) {
        //   console.log(this.query.list[i])
        // }
        // console.log(this.query.rows)
        // console.log(this.query.list)
        const echarts = require('echarts')
        const myChart = echarts.init(document.getElementById('chartLine'))
        // 2、构造图表数据
        myChart.setOption(
          {
            // backgroundColor: '#061326',
            title: {
              text: '工资情况分析',
              left: 'center',
              tooltip: {}
            },
            xAxis: {
              type: 'category',
              data: this.query.rows,
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                rotate: -30
              }
            },
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            yAxis: {
              show: true,
              type: 'value'
            },
            legend: {
              data: ['基本工资', '奖金', '午餐补助'],
              textStyle: {
                color: 'red'
              },
              x: 'right',
              max: 100,
              min: 0
            },
            series: [
              {
                name: '基本工资',
                data: this.query.list,
                type: 'bar',
                barWidth: 25, // 柱子宽度
                barGap: 1, // 柱子之间间距
                selectedMode: 'single',
                itemStyle: {
                  normal: {
                    label: {
                      formatter: '{c}' + '元', // 显示数据
                      show: true, // 是否显示
                      position: 'top', // 显示位置
                      textStyle: { // 显示数据的样式
                        fontWeight: 'bolder',
                        fontSize: '12',
                        color: 'red'
                      }
                    }
                  }
                }
              },
              {
                name: '奖金',
                data: this.query.list1,
                type: 'bar',
                barWidth: 25, // 柱子宽度
                barGap: 1, // 柱子之间间距
                selectedMode: 'single',
                itemStyle: {
                  normal: {
                    label: {
                      formatter: '{c}' + '元',
                      show: true,
                      position: 'top',
                      textStyle: {
                        fontWeight: 'bolder',
                        fontSize: '12',
                        color: 'red'
                      }
                    }
                  }
                }
              },
              {
                name: '午餐补助',
                data: this.query.list2,
                type: 'bar',
                barWidth: 50, // 柱子宽度
                barGap: 1, // 柱子之间间距
                selectedMode: 'single',
                itemStyle: {
                  normal: {
                    label: {
                      formatter: '{c}' + '元',
                      show: true,
                      position: 'top',
                      textStyle: {
                        fontWeight: 'bolder',
                        fontSize: '12',
                        color: 'red'
                      }
                    }
                  }
                }
              }
            ]
          })
      }).catch((error) => {
        console.log(error)
        this.$message({
          title: '提示',
          message: '操作员列表查询失败',
          type: 'error',
          duration: 2000
        })
      })
    }
  }
}
</script>
<style scoped>

</style>
